<template>
  <PageContainer title="系统设置">
    <el-tabs v-model="activeTab" type="card">
      <!-- 基础设置 -->
      <el-tab-pane label="基础设置" name="basic">
        <el-card title="系统基础配置">
          <el-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="120px"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="系统名称" prop="systemName">
                  <el-input
                    v-model="basicForm.systemName"
                    placeholder="请输入系统名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="系统版本" prop="systemVersion">
                  <el-input
                    v-model="basicForm.systemVersion"
                    placeholder="请输入系统版本"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="公司名称" prop="companyName">
                  <el-input
                    v-model="basicForm.companyName"
                    placeholder="请输入公司名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="contactPhone">
                  <el-input
                    v-model="basicForm.contactPhone"
                    placeholder="请输入联系电话"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系邮箱" prop="contactEmail">
                  <el-input
                    v-model="basicForm.contactEmail"
                    placeholder="请输入联系邮箱"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="系统域名" prop="systemDomain">
                  <el-input
                    v-model="basicForm.systemDomain"
                    placeholder="请输入系统域名"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="系统描述" prop="systemDescription">
              <el-input
                v-model="basicForm.systemDescription"
                type="textarea"
                :rows="3"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            <el-form-item label="系统Logo">
              <el-upload
                class="logo-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeLogoUpload"
                :http-request="handleLogoUpload"
              >
                <el-image
                  v-if="basicForm.systemLogo"
                  :src="basicForm.systemLogo"
                  fit="contain"
                  style="width: 120px; height: 60px;"
                />
                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleBasicSubmit" :loading="submitting">
                保存设置
              </el-button>
              <el-button @click="handleBasicReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 业务设置 -->
      <el-tab-pane label="业务设置" name="business">
        <el-card title="业务参数配置">
          <el-form
            ref="businessFormRef"
            :model="businessForm"
            :rules="businessRules"
            label-width="150px"
          >
            <el-divider content-position="left">投递设置</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最小投递重量(kg)" prop="minDisposalWeight">
                  <el-input-number
                    v-model="businessForm.minDisposalWeight"
                    :min="0.01"
                    :max="10"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大投递重量(kg)" prop="maxDisposalWeight">
                  <el-input-number
                    v-model="businessForm.maxDisposalWeight"
                    :min="1"
                    :max="100"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="投递超时时间(分钟)" prop="disposalTimeout">
                  <el-input-number
                    v-model="businessForm.disposalTimeout"
                    :min="1"
                    :max="60"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="每日投递限制(次)" prop="dailyDisposalLimit">
                  <el-input-number
                    v-model="businessForm.dailyDisposalLimit"
                    :min="1"
                    :max="100"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider content-position="left">收益设置</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="塑料单价(元/kg)" prop="plasticPrice">
                  <el-input-number
                    v-model="businessForm.plasticPrice"
                    :min="0.1"
                    :max="10"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纸类单价(元/kg)" prop="paperPrice">
                  <el-input-number
                    v-model="businessForm.paperPrice"
                    :min="0.1"
                    :max="10"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="金属单价(元/kg)" prop="metalPrice">
                  <el-input-number
                    v-model="businessForm.metalPrice"
                    :min="0.1"
                    :max="50"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="玻璃单价(元/kg)" prop="glassPrice">
                  <el-input-number
                    v-model="businessForm.glassPrice"
                    :min="0.1"
                    :max="10"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider content-position="left">提现设置</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最小提现金额(元)" prop="minWithdrawal">
                  <el-input-number
                    v-model="businessForm.minWithdrawal"
                    :min="1"
                    :max="1000"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提现手续费率(%)" prop="withdrawalFeeRate">
                  <el-input-number
                    v-model="businessForm.withdrawalFeeRate"
                    :min="0"
                    :max="10"
                    :precision="2"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="每日提现限制(次)" prop="dailyWithdrawalLimit">
                  <el-input-number
                    v-model="businessForm.dailyWithdrawalLimit"
                    :min="1"
                    :max="10"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提现审核" prop="withdrawalReview">
                  <el-switch
                    v-model="businessForm.withdrawalReview"
                    active-text="需要审核"
                    inactive-text="自动处理"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" @click="handleBusinessSubmit" :loading="submitting">
                保存设置
              </el-button>
              <el-button @click="handleBusinessReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 通知设置 -->
      <el-tab-pane label="通知设置" name="notification">
        <el-card title="通知配置">
          <el-form
            ref="notificationFormRef"
            :model="notificationForm"
            label-width="150px"
          >
            <el-divider content-position="left">短信通知</el-divider>
            <el-form-item label="短信服务商">
              <el-select v-model="notificationForm.smsProvider" style="width: 300px">
                <el-option label="阿里云短信" value="aliyun" />
                <el-option label="腾讯云短信" value="tencent" />
                <el-option label="华为云短信" value="huawei" />
              </el-select>
            </el-form-item>
            <el-form-item label="AccessKey ID">
              <el-input
                v-model="notificationForm.smsAccessKeyId"
                placeholder="请输入AccessKey ID"
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="AccessKey Secret">
              <el-input
                v-model="notificationForm.smsAccessKeySecret"
                type="password"
                placeholder="请输入AccessKey Secret"
                style="width: 400px"
                show-password
              />
            </el-form-item>
            <el-form-item label="短信签名">
              <el-input
                v-model="notificationForm.smsSignature"
                placeholder="请输入短信签名"
                style="width: 300px"
              />
            </el-form-item>

            <el-divider content-position="left">邮件通知</el-divider>
            <el-form-item label="SMTP服务器">
              <el-input
                v-model="notificationForm.smtpHost"
                placeholder="请输入SMTP服务器地址"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input-number
                v-model="notificationForm.smtpPort"
                :min="1"
                :max="65535"
                style="width: 200px"
              />
            </el-form-item>
            <el-form-item label="发送邮箱">
              <el-input
                v-model="notificationForm.smtpUsername"
                placeholder="请输入发送邮箱"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item label="邮箱密码">
              <el-input
                v-model="notificationForm.smtpPassword"
                type="password"
                placeholder="请输入邮箱密码"
                style="width: 300px"
                show-password
              />
            </el-form-item>
            <el-form-item label="SSL加密">
              <el-switch
                v-model="notificationForm.smtpSsl"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>

            <el-divider content-position="left">推送通知</el-divider>
            <el-form-item label="投递成功通知">
              <el-switch
                v-model="notificationForm.disposalSuccessNotify"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="提现成功通知">
              <el-switch
                v-model="notificationForm.withdrawalSuccessNotify"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="系统维护通知">
              <el-switch
                v-model="notificationForm.maintenanceNotify"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleNotificationSubmit" :loading="submitting">
                保存设置
              </el-button>
              <el-button @click="handleNotificationReset">重置</el-button>
              <el-button type="success" @click="handleTestNotification">
                测试通知
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-card title="安全配置">
          <el-form
            ref="securityFormRef"
            :model="securityForm"
            label-width="150px"
          >
            <el-divider content-position="left">登录安全</el-divider>
            <el-form-item label="登录失败限制">
              <el-input-number
                v-model="securityForm.loginFailLimit"
                :min="3"
                :max="10"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">次后锁定账户</span>
            </el-form-item>
            <el-form-item label="账户锁定时间">
              <el-input-number
                v-model="securityForm.lockDuration"
                :min="5"
                :max="1440"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">分钟</span>
            </el-form-item>
            <el-form-item label="会话超时时间">
              <el-input-number
                v-model="securityForm.sessionTimeout"
                :min="30"
                :max="1440"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">分钟</span>
            </el-form-item>
            <el-form-item label="强制HTTPS">
              <el-switch
                v-model="securityForm.forceHttps"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>

            <el-divider content-position="left">密码策略</el-divider>
            <el-form-item label="密码最小长度">
              <el-input-number
                v-model="securityForm.passwordMinLength"
                :min="6"
                :max="20"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">位</span>
            </el-form-item>
            <el-form-item label="密码复杂度">
              <el-checkbox-group v-model="securityForm.passwordComplexity">
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码有效期">
              <el-input-number
                v-model="securityForm.passwordExpireDays"
                :min="30"
                :max="365"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">天</span>
            </el-form-item>
            <el-form-item label="禁止重复密码">
              <el-input-number
                v-model="securityForm.passwordHistoryLimit"
                :min="3"
                :max="10"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">个历史密码</span>
            </el-form-item>

            <el-divider content-position="left">API安全</el-divider>
            <el-form-item label="API访问限制">
              <el-input-number
                v-model="securityForm.apiRateLimit"
                :min="100"
                :max="10000"
                style="width: 200px"
              />
              <span style="margin-left: 8px; color: #909399">次/小时</span>
            </el-form-item>
            <el-form-item label="IP白名单">
              <el-input
                v-model="securityForm.ipWhitelist"
                type="textarea"
                :rows="3"
                placeholder="请输入IP地址，每行一个"
                style="width: 400px"
              />
            </el-form-item>
            <el-form-item label="启用API日志">
              <el-switch
                v-model="securityForm.enableApiLog"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSecuritySubmit" :loading="submitting">
                保存设置
              </el-button>
              <el-button @click="handleSecurityReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 系统监控 -->
      <el-tab-pane label="系统监控" name="monitor">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card title="系统信息">
              <el-descriptions :column="1" border>
                <el-descriptions-item label="操作系统">
                  {{ systemInfo.os }}
                </el-descriptions-item>
                <el-descriptions-item label="服务器IP">
                  {{ systemInfo.serverIp }}
                </el-descriptions-item>
                <el-descriptions-item label="运行时间">
                  {{ systemInfo.uptime }}
                </el-descriptions-item>
                <el-descriptions-item label="Java版本">
                  {{ systemInfo.javaVersion }}
                </el-descriptions-item>
                <el-descriptions-item label="数据库版本">
                  {{ systemInfo.dbVersion }}
                </el-descriptions-item>
                <el-descriptions-item label="Redis版本">
                  {{ systemInfo.redisVersion }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card title="性能监控">
              <div class="performance-item">
                <div class="performance-label">CPU使用率</div>
                <el-progress
                  :percentage="systemInfo.cpuUsage"
                  :color="getPerformanceColor(systemInfo.cpuUsage)"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">内存使用率</div>
                <el-progress
                  :percentage="systemInfo.memoryUsage"
                  :color="getPerformanceColor(systemInfo.memoryUsage)"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">磁盘使用率</div>
                <el-progress
                  :percentage="systemInfo.diskUsage"
                  :color="getPerformanceColor(systemInfo.diskUsage)"
                />
              </div>
              <div class="performance-item">
                <div class="performance-label">网络带宽</div>
                <div class="network-info">
                  <span>上行：{{ systemInfo.networkUpload }}</span>
                  <span style="margin-left: 20px">下行：{{ systemInfo.networkDownload }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="24">
            <el-card title="在线用户">
              <el-table :data="onlineUsers" size="small">
                <el-table-column prop="id" label="用户ID" width="100" />
                <el-table-column prop="username" label="用户名" width="150" />
                <el-table-column prop="realName" label="真实姓名" width="120" />
                <el-table-column prop="ipAddress" label="IP地址" width="150" />
                <el-table-column prop="location" label="登录地点" width="200" />
                <el-table-column prop="browser" label="浏览器" width="150" />
                <el-table-column prop="loginTime" label="登录时间" width="180">
                  <template #default="{ row }">
                    {{ formatDateTime(row.loginTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="lastActivity" label="最后活动" width="180">
                  <template #default="{ row }">
                    {{ formatDateTime(row.lastActivity) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="{ row }">
                    <el-button
                      type="danger"
                      size="small"
                      @click="handleKickUser(row)"
                    >
                      踢出
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import { useSystemStore } from '@/stores/system'
import { formatDateTime } from '@/utils'

const systemStore = useSystemStore()

const activeTab = ref('basic')
const submitting = ref(false)
const basicFormRef = ref<FormInstance>()
const businessFormRef = ref<FormInstance>()
const notificationFormRef = ref<FormInstance>()
const securityFormRef = ref<FormInstance>()

// 基础设置表单
const basicForm = reactive({
  systemName: '智慧回收箱管理系统',
  systemVersion: 'v1.0.0',
  companyName: '智慧环保科技有限公司',
  contactPhone: '400-123-4567',
  contactEmail: 'contact@smartrecycle.com',
  systemDomain: 'https://admin.smartrecycle.com',
  systemDescription: '智能垃圾回收箱后台管理系统，提供设备管理、用户管理、投递管理等功能。',
  systemLogo: ''
})

// 业务设置表单
const businessForm = reactive({
  minDisposalWeight: 0.1,
  maxDisposalWeight: 50,
  disposalTimeout: 10,
  dailyDisposalLimit: 20,
  plasticPrice: 2.5,
  paperPrice: 1.8,
  metalPrice: 8.0,
  glassPrice: 0.5,
  minWithdrawal: 10,
  withdrawalFeeRate: 0.5,
  dailyWithdrawalLimit: 3,
  withdrawalReview: true
})

// 通知设置表单
const notificationForm = reactive({
  smsProvider: 'aliyun',
  smsAccessKeyId: '',
  smsAccessKeySecret: '',
  smsSignature: '智慧回收',
  smtpHost: 'smtp.qq.com',
  smtpPort: 587,
  smtpUsername: '',
  smtpPassword: '',
  smtpSsl: true,
  disposalSuccessNotify: true,
  withdrawalSuccessNotify: true,
  maintenanceNotify: true
})

// 安全设置表单
const securityForm = reactive({
  loginFailLimit: 5,
  lockDuration: 30,
  sessionTimeout: 120,
  forceHttps: true,
  passwordMinLength: 8,
  passwordComplexity: ['lowercase', 'number'],
  passwordExpireDays: 90,
  passwordHistoryLimit: 5,
  apiRateLimit: 1000,
  ipWhitelist: '',
  enableApiLog: true
})

// 系统信息
const systemInfo = reactive({
  os: 'Ubuntu 20.04 LTS',
  serverIp: '192.168.1.100',
  uptime: '15天 8小时 32分钟',
  javaVersion: 'OpenJDK 11.0.16',
  dbVersion: 'MySQL 8.0.30',
  redisVersion: 'Redis 6.2.7',
  cpuUsage: 35,
  memoryUsage: 68,
  diskUsage: 45,
  networkUpload: '2.5 MB/s',
  networkDownload: '8.3 MB/s'
})

// 在线用户
const onlineUsers = ref([
  {
    id: 1,
    username: 'admin',
    realName: '系统管理员',
    ipAddress: '192.168.1.101',
    location: '北京市朝阳区',
    browser: 'Chrome 108.0',
    loginTime: '2024-01-15 09:00:00',
    lastActivity: '2024-01-15 14:30:00'
  },
  {
    id: 2,
    username: 'operator',
    realName: '运营人员',
    ipAddress: '192.168.1.102',
    location: '上海市浦东新区',
    browser: 'Firefox 108.0',
    loginTime: '2024-01-15 10:30:00',
    lastActivity: '2024-01-15 14:25:00'
  }
])

// 表单验证规则
const basicRules: FormRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' }
  ],
  systemVersion: [
    { required: true, message: '请输入系统版本', trigger: 'blur' }
  ],
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  contactEmail: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const businessRules: FormRules = {
  minDisposalWeight: [
    { required: true, message: '请输入最小投递重量', trigger: 'blur' }
  ],
  maxDisposalWeight: [
    { required: true, message: '请输入最大投递重量', trigger: 'blur' }
  ]
}

// 获取性能颜色
const getPerformanceColor = (percentage: number) => {
  if (percentage >= 80) return '#F56C6C'
  if (percentage >= 60) return '#E6A23C'
  return '#67C23A'
}

// Logo上传前检查
const beforeLogoUpload: UploadProps['beforeUpload'] = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 处理Logo上传
const handleLogoUpload = async (options: any) => {
  // 模拟上传
  setTimeout(() => {
    basicForm.systemLogo = 'https://via.placeholder.com/120x60?text=LOGO'
    ElMessage.success('Logo上传成功')
  }, 1000)
}

// 基础设置提交
const handleBasicSubmit = async () => {
  if (!basicFormRef.value) return
  
  try {
    await basicFormRef.value.validate()
    submitting.value = true
    
    // 调用保存基础设置API
    await systemStore.updateBasicSettings(basicForm)
    ElMessage.success('基础设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    submitting.value = false
  }
}

// 基础设置重置
const handleBasicReset = () => {
  basicFormRef.value?.resetFields()
}

// 业务设置提交
const handleBusinessSubmit = async () => {
  if (!businessFormRef.value) return
  
  try {
    await businessFormRef.value.validate()
    submitting.value = true
    
    // 调用保存业务设置API
    await systemStore.updateBusinessSettings(businessForm)
    ElMessage.success('业务设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    submitting.value = false
  }
}

// 业务设置重置
const handleBusinessReset = () => {
  businessFormRef.value?.resetFields()
}

// 通知设置提交
const handleNotificationSubmit = async () => {
  submitting.value = true
  try {
    // 调用保存通知设置API
    await systemStore.updateNotificationSettings(notificationForm)
    ElMessage.success('通知设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    submitting.value = false
  }
}

// 通知设置重置
const handleNotificationReset = () => {
  notificationFormRef.value?.resetFields()
}

// 测试通知
const handleTestNotification = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要发送测试通知吗？',
      '测试通知',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 调用测试通知API
    ElMessage.success('测试通知发送成功')
  } catch (error) {
    // 用户取消
  }
}

// 安全设置提交
const handleSecuritySubmit = async () => {
  submitting.value = true
  try {
    // 调用保存安全设置API
    await systemStore.updateSecuritySettings(securityForm)
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    submitting.value = false
  }
}

// 安全设置重置
const handleSecurityReset = () => {
  securityFormRef.value?.resetFields()
}

// 踢出用户
const handleKickUser = async (user: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要踢出用户 ${user.realName} 吗？`,
      '踢出用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用踢出用户API
    ElMessage.success('用户已被踢出')
    // 刷新在线用户列表
  } catch (error) {
    // 用户取消
  }
}

// 加载系统设置
const loadSystemSettings = async () => {
  try {
    // 加载各种设置
    const settings = await systemStore.fetchSystemSettings()
    Object.assign(basicForm, settings.basic)
    Object.assign(businessForm, settings.business)
    Object.assign(notificationForm, settings.notification)
    Object.assign(securityForm, settings.security)
  } catch (error) {
    console.error('加载系统设置失败:', error)
  }
}

onMounted(() => {
  loadSystemSettings()
})
</script>

<style lang="scss" scoped>
.logo-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    width: 120px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border-color: #409EFF;
    }
  }

  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }
}

.performance-item {
  margin-bottom: 20px;

  .performance-label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #303133;
  }
}

.network-info {
  font-size: 14px;
  color: #606266;
}

.el-card {
  margin-bottom: 20px;
}

.el-divider {
  margin: 24px 0;
}

@media (max-width: 768px) {
  .el-form-item {
    .el-input,
    .el-select,
    .el-input-number {
      width: 100% !important;
    }
  }
}
</style>